import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { Card, Table, Button, Tooltip, Popconfirm } from 'antd';
import styles from './List.less';

const { Column, ColumnGroup } = Table;

class List extends Component {

  // 一个 Table
  renderTable = (tableData, ind) => {
    const {
      handlePressAddNewRecord,
      handleDelete,
      handlePressDeleteField,
      handlePressEditField,
    } = this.props;

    return (
      <Card
        key={ind}
        className={styles.tableCard}>
        <Table
          dataSource={tableData}
          pagination={false}
          className={styles.table}
          bordered
          size="small"
          rowKey={record => record.id}
        >
          <Column
            title="土地"
            dataIndex="fieldName"
            key="fieldName"
            render={(text, record, indd) => {
              const children = (
                <div className={styles.fieldWrapper}>
                  <Tooltip placement="top" title="土地">
                    <div>{text}</div>
                  </Tooltip>
                  <div className={styles.buttonWrapper}>
                    <Button
                      size="small"
                      type="primary"
                      className={styles.button}
                      onClick={() => handlePressAddNewRecord(record)}>
                      新增记录
                    </Button>
                  </div>
                  <div className={styles.buttonWrapper}>
                    <Button
                      size="small"
                      className={styles.button}
                      onClick={() => handlePressEditField(record)}>
                      编辑土地
                    </Button>
                  </div>
                  <div className={styles.buttonWrapper}>
                    <Popconfirm trigger="hover" title="确定删除土地？" onConfirm={() => handlePressDeleteField(record)}>
                      <Button
                        size="small"
                        type="danger"
                        className={styles.button}>
                        删除土地
                      </Button>
                    </Popconfirm>
                  </div>
                </div>
              );
              if(indd === 0) {
                return {
                  children: children,
                  props: {
                    rowSpan: tableData.length,
                  },
                };
              }
              return {
                children: text,
                props: {
                  rowSpan: 0,
                },
              };
            }}
          />
          <Column
            title="面积"
            dataIndex="area"
            key="area"
            render={(text, record, indd) => {
              if(indd === 0) {
                return {
                  children: (
                    <Tooltip placement="top" title="面积">
                      {text}
                    </Tooltip>
                  ),
                  props: {
                    rowSpan: tableData.length,
                  },
                };
              }
              return {
                children: text,
                props: {
                  rowSpan: 0,
                },
              };
            }}
          />
          <ColumnGroup title="苗床整地">
            <Column
              title="时间"
              dataIndex="miaochuangzhengdi_time"
              key="miaochuangzhengdi_time"
              render={text => (
                <Tooltip placement="top" title="苗床整地-时间">
                  <span className={styles.time}>{text}</span>
                </Tooltip>
              )}
            />
            <Column
              title="费用"
              dataIndex="miaochuangzhengdi_cost"
              key="miaochuangzhengdi_cost"
              render={text => (
                <Tooltip placement="top" title="苗床整地-费用">
                  {text}
                </Tooltip>
              )}
            />
          </ColumnGroup>
          <ColumnGroup title="施肥">
            <Column
              title="时间"
              dataIndex="shifei_time"
              key="shifei_time"
              render={text => (
                <Tooltip placement="top" title="施肥-时间">
                  {text}
                </Tooltip>
              )}
            />
            <Column
              title="费用"
              dataIndex="shifei_cost"
              key="shifei_cost"
              render={text => (
                <Tooltip placement="top" title="施肥-费用">
                  {text}
                </Tooltip>
              )}
            />
          </ColumnGroup>
          <ColumnGroup title="播种">
            <Column
              title="时间"
              dataIndex="bozhong_time"
              key="bozhong_time"
              render={text => (
                <Tooltip placement="top" title="播种-时间">
                  {text}
                </Tooltip>
              )}
            />
            <Column
              title="费用"
              dataIndex="bozhong_cost"
              key="bozhong_cost"
              render={text => (
                <Tooltip placement="top" title="播种-费用">
                  {text}
                </Tooltip>
              )}
            />
          </ColumnGroup>
          <ColumnGroup title="病虫防治">
            <Column
              title="时间"
              dataIndex="bingchongfangzhi_time"
              key="bingchongfangzhi_time"
              render={text => (
                <Tooltip placement="top" title="病虫防治-时间">
                  {text}
                </Tooltip>
              )}
            />
            <Column
              title="费用"
              dataIndex="bingchongfangzhi_cost"
              key="bingchongfangzhi_cost"
              render={text => (
                <Tooltip placement="top" title="病虫防治-费用">
                  {text}
                </Tooltip>
              )}
            />
          </ColumnGroup>
          <ColumnGroup title="收割">
            <Column
              title="时间"
              dataIndex="shouge_time"
              key="shouge_time"
              render={text => (
                <Tooltip placement="top" title="收割-时间">
                  {text}
                </Tooltip>
              )}
            />
            <Column
              title="费用"
              dataIndex="shouge_cost"
              key="shouge_cost"
              render={text => (
                <Tooltip placement="top" title="收割-费用">
                  {text}
                </Tooltip>
              )}
            />
          </ColumnGroup>
          <ColumnGroup title="其他">
            <Column
              title="名称"
              dataIndex="other_name"
              key="other_name"
              render={text => (
                <Tooltip placement="top" title="其他-名称">
                  {text}
                </Tooltip>
              )}
            />
            <Column
              title="时间"
              dataIndex="other_time"
              key="other_time"
              render={text => (
                <Tooltip placement="top" title="其他-时间">
                  {text}
                </Tooltip>
              )}
            />
            <Column
              title="费用"
              dataIndex="other_cost"
              key="other_cost"
              render={text => (
                <Tooltip placement="top" title="其他-费用">
                  {text}
                </Tooltip>
              )}
            />
          </ColumnGroup>
          <Column
            title="操作"
            dataIndex="operation"
            key="operation"
            render={(text, record, ind) => {
              const children = (
                <Popconfirm title="确定删除记录？" onConfirm={() => handleDelete(record)} trigger="hover">
                  <a href="javascript: void(0)">删除</a>
                </Popconfirm>
              );
              return {
                children: record.noRecord ? null : children,
              };
            }}
          />
        </Table>
      </Card>
    );
  };

  render() {
    const {
      listData,
      loading,
    } = this.props;

    if(loading) {
      return (
        <Card loading={loading} />
      );
    } else {
      return listData.map(this.renderTable);
    }
  }
}

List.propTypes = {
  handlePressAddNewRecord: PropTypes.func.isRequired,
  handleDelete: PropTypes.func.isRequired,
  handlePressDeleteField: PropTypes.func.isRequired,
  handlePressEditField: PropTypes.func.isRequired,
};

export default List;
